import React, { Component } from 'react';
import { LocaleProvider, Layout } from 'antd';
import { Route, HashRouter } from 'react-router-dom';
import Routes from './router';
import Routessand from './router/indexsand';
import { connect } from 'react-redux';
import LeftSider from './components/common/LeftSider';
import Head from './components/common/Head';
import HeadSand from './components/SandBox/Head/index';
import Bread from './components/common/Bread';
import Login from './components/Login';
import Register from './components/Register';
import CopyRight from './components/copyRight/index';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import controlPanel from './components/controlPanel/index.jsx';
import moment from 'moment';
import 'moment/locale/zh-cn';
import './App.less';
import Tips from './components/Loading/index';
moment.locale('en');

const { Header, Sider, Content } = Layout;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentWillMount() {
    if (!localStorage.getItem('token') && window.location.hash != '#/Register' && window.location.hash != '#/Register/baasWeb' && window.location.hash != '#/forgetPwd' && window.location.hash != '#/modifypwd') {
      // 判断如果没有token并且不是注册页面，跳到登录页，并清掉localStorage中的数据
      this.props.dispatch({ type: 'loginout' });
    } else if (window.location.hash == '#/Register' || window.location.hash == '#/Register/baasWeb') {
      // 如果是注册页面，清掉localStorage中的数据
      localStorage.removeItem('userName');
      localStorage.removeItem('fillclickTime'); // 创建组织填写资料  获取验证码
      localStorage.removeItem('noUseclickTime'); // 证书管理 作废证书弹窗  获取验证码
      localStorage.removeItem('createKeyclickTime'); // 创建密钥 获取验证码
      localStorage.removeItem('changePwdclickTime'); // 密码修改  获取验证码
      localStorage.removeItem('changePhoneclickTime');
      localStorage.removeItem('token');
    }
  }
  render() {
    // 根据是否有Token设置根目录是登录页还是控制面板页,注册页只有在没有token的情况下才能跳转，否则走控制面板页
    if (localStorage.getItem('token')) {
      Routes[0] = Routessand[0] = {
        exact: true,
        path: '/',
        component: controlPanel
      };
      Routes[3] = Routessand[3] = {
        exact: true,
        path: '/Register',
        component: controlPanel
      };
    } else {
      Routes[0] = Routessand[0] = {
        exact: true,
        path: '/',
        component: Login
      };
      Routes[3] = Routessand[3] = {
        exact: true,
        path: '/Register',
        component: Register
      };
    }
    const routers = Routes.map((item, index) => {
      return item.exact ? <Route key={index} exact path={item.path} component={item.component} /> : <Route key={index} path={item.path} component={item.component} />;
    });
    const routerssand = Routessand.map((item, index) => {
      return item.exact ? <Route key={index} exact path={item.path} component={item.component} /> : <Route key={index} path={item.path} component={item.component} />;
    });
    if (localStorage.getItem('token')) {
      return (
        <LocaleProvider locale={zhCN}>
          <HashRouter>
            <div className="App">
              <Layout>
                <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, zIndex: 2 }}>
                  <div className="logo">
                    <a href="https://www.sinochembaas.com/" target="_blank" style={{ display: 'block' }}>
                      <img src={require('./static/img/logo.png')} alt="logo" />
                    </a>
                  </div>
                  <LeftSider />
                </Sider>
                <Layout style={{ marginLeft: 200 }}>
                  <Header className="header">
                    {
                      this.props.changSandBox ? <Head /> : <HeadSand />
                    }
                  </Header>
                  <Content style={{ background: '#fff', padding: 15, marginLeft: 10, marginRight: 10, minHeight: 415, marginTop: 30 }}>
                    {
                      this.props.changSandBox ? routers : routerssand
                    }
                  </Content>
                  <CopyRight />
                </Layout>
              </Layout>
              <Tips message={this.props.message} />
            </div>
          </HashRouter>
        </LocaleProvider>
      );
    } else {
      return (
        <HashRouter >
          <div className="App">
            {
              this.props.changSandBox ? routers : routerssand
            }
            <Tips message={this.props.message} />
          </div>
        </HashRouter>
      );
    }
  }
}

export default connect((state) => {
  return { ...state };
})(App);
